<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>
<style type="text/css">

</style>
</head>
<body>

<ol>
  <li>watch文本改变事件</li>
</ol>



<div id="app">

	<input type="text" v-model='first' >
	<input type="text" v-model='last' >
	<input type="text" v-model='full'>

<br><br>
  <input type="text" v-model="val">
  <span> now:{{now}}</span>
  <span>--- old:{{old}}</span>




</div>





<br>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script type="text/javascript">

var  vm= new Vue({
  el: '#app',

  data: {
  	first:'',
  	last:'',
  	full:'',
  	 
    now:'',
    old:"",
    val:'',
  },

  methods:{

  },

  watch:{//使用这个属性可以监视 data 中指定数据的变化，然后触发这个watch中对应的函数
  		//第一个参数是要监听的数据，第二个参数（这个参数是函数）是数据改变时做出的行为
  		//第一个参数的名称如果有横线、下划线就要使用引号包起来，没有就直接写名称就可以
  		'first':function(newVal, oldVal){
  			// console.log('123')
  			// console.log(newVal +'+'+ oldVal)
  			this.full = this.first + this.last
  		},

  		'last':function(newVal){
  			// console.log(newVal +'+'+ oldVal)
  			this.full = this.first + newVal
  		},

      'val':function(now,old){
          this.now=now
          this.old=old
      }

  		
  }
  	

  

})





</script>

	
</body>
</html>